<template>
  <div>
    <Echart
      :options="options"
      id="bottomRightChart"
      height="220px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
import * as XLSX from 'xlsx';
import xlsxFile from '@/assets/data/data.xlsx';

export default {
  components: { Echart },
  data() {
    return {
      options: {}
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    async initChart() {
      try {
        const response = await fetch(xlsxFile);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const arrayBuffer = await response.arrayBuffer();
        const workbook = XLSX.read(arrayBuffer, { type: 'array' });

        const sheetName = '全球创新群体规模';
        const worksheet = workbook.Sheets[sheetName];
        if (!worksheet) {
          throw new Error('找不到工作表: 全球创新群体规模');
        }

        const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        const months = [];
        const authorCounts = [];

        for (let i = 1; i < data.length; i++) {
          months.push(data[i][0]);
          authorCounts.push(parseInt(data[i][1]));
        }

        this.options = {
          tooltip: {
            trigger: 'axis',
            formatter: (params) => {
              const p = params[0]
              return `
                <div style="text-align:left;">
                  <div>月份：${p.name}</div>
                  <div>作者数量：${p.value}</div>
                </div>
              `
            },
            backgroundColor: 'rgba(0,0,0,0.7)',
            textStyle: { color: '#fff' },
            padding: 10
          },
          grid: { left: 40, right: 20, bottom: 40, top: 50 },
          xAxis: {
            type: 'category',
            data: months,
            axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
            axisLabel: { color: '#fff', fontSize: 12 }
          },
          yAxis: {
            type: 'value',
            name: '作者数量',
            nameTextStyle: { color: '#fff' },
            splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
            axisLabel: { color: '#fff', fontSize: 12 }
          },
          series: [
            {
              name: '作者数量',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 6,
              itemStyle: { color: '#28f8de' },
              lineStyle: { color: '#28f8de', width: 2 },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0, y: 0, x2: 0, y2: 1,
                  colorStops: [
                    { offset: 0, color: 'rgba(40,248,222,0.4)' },
                    { offset: 1, color: 'rgba(40,248,222,0.1)' }
                  ]
                }
              },
              data: authorCounts
            }
          ]
        }
      } catch (error) {
        console.error('读取文件时出错:', error);
      }
    }
  }
}
</script>
